<template>
  <view class="order-item-card" @click="onClick">
    <view class="order-status">
      <text>{{orderInfo.orderStatus}}</text>
    </view>
    <view class="order-info">
      <view class="order-number">{{orderInfo.numberName}}</view>
      <view class="order-date">{{orderInfo.createTime}}</view>
      <view class="order-price">￥{{orderInfo.money}}</view>
    </view>
    <view class="order-action">
      <view class="order-action-btn" @click.stop="again">{{"再次缴费"|i18n}}</view>
      <view class="order-action-btn" @click.stop="remove">{{"删除订单"|i18n}}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "orderItemCard",
  props: {
    orderInfo: {
      type: Object
    }
  },
  methods: {
    onClick () {
      this.$emit('click', this.orderInfo)
    },
    again () {
      this.$emit('again', this.orderInfo)
    },
    remove () {
      this.$emit('remove', this.orderInfo)
    }
  }
}
</script>

<style lang="less" scoped>
.order-item-card {
  padding: 20upx 30upx;
  background: #FFFFFF;
  border-radius: 20upx;
  direction: rtl;
}
.order-status {
  padding: 20upx 0;
  font-size: 24upx;
  font-weight: 400;
  color: #E9631F;
  line-height: 24upx;
}
.order-info {
  padding: 20upx 0;
  border-top: 1px solid #F6F6F6;
  border-bottom: 1px solid #F6F6F6;
  .order-number {
    font-size: 32upx;
    font-weight: 500;
    color: #333333;
    line-height: 32upx;
  }
  .order-date {
    margin-top: 20upx;
    font-size: 24upx;
    font-weight: 400;
    color: #666666;
    line-height: 24upx;
  }
  .order-price {
    margin-top: 20upx;
    font-size: 24upx;
    font-weight: 500;
    color: #333333;
    line-height: 24upx;
  }
}
.order-action {
  padding-top: 20upx ;
  .order-action-btn {
    display: inline-block;
    padding: 12upx 22upx;
    font-size: 24upx;
    font-weight: 400;
    color: #333333;
    line-height: 24upx;
    border-radius: 32upx;
    border: 1px solid #CDCDCD;
    margin-left: 20upx;
  }
}

</style>